<template>
  <div class="app-container">
    <el-form ref="form" inline :model="form" class="form-options" label-width="100px">
      <el-form-item label="标题">
        <el-input
          v-model="form.title"
          placeholder="请输入标题"
          clearable/>
      </el-form-item>
      <el-form-item label="操作人">
        <el-autocomplete
          ref="operNameRef"
          v-model="form.operName"
          placeholder="请输入操作人"
          :fetch-suggestions="querySearchOperName"
          clearable
          @select="handleSelectOperName"
          @clear="clickClearoperNameRef"/>
      </el-form-item>
      <el-form-item label="操作时间" class="long-content">
        <el-date-picker
          v-model="form.date"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          align="right">
        </el-date-picker>
      </el-form-item>
      <div class="btns">
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </div>
    </el-form>
    <el-table
      :data="tableData"
      header-cell-class-name="table-header"
      style="width: 100%;margin-top: 20px">
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题">
      </el-table-column>
      <el-table-column
        prop="operName"
        label="操作人">
      </el-table-column>
      <el-table-column
        prop="operTime"
        label="操作时间">
      </el-table-column>
      <el-table-column
        prop="operDetail"
        label="操作明细">
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin-top: 20px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getLogs } from '@/api/log'
import { getUserCondition } from '@/api/common'

export default {
  name: 'LogManage',
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize: 10,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      form: {
        title: '',
        operName: '',
        date: []
      },
      tableData: []
    }
  },
  created() {
    this.onQuery()
  },
  methods: {
    handleSizeChange: function(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getTableData()
    },
    handleCurrentChange: function(val) {
      this.currentPage = val
      this.getTableData()
    },
    /**
     * 模糊查询操作人
     * @param queryString
     * @param cb
     */
    querySearchOperName: function(queryString, cb) {
      const results = []
      // 调用 callback 返回建议列表的数据
      if (queryString.length === 0) {
        cb(results)
        return
      }
      getUserCondition({ userName: queryString }).then(res => {
        res.resultData.forEach(item => {
          results.push({ value: item.userName })
        })
        cb(results)
      })
    },
    /**
     * 选择操作人
     * @param item
     */
    handleSelectOperName(item) {
      console.log(item)
    },
    clickClearoperNameRef(){
      this.$nextTick(() => {
        if (this.$refs.operNameRef) {
          this.$refs.operNameRef.activated = true;
        }
      });
    },
    getTableData() {
      const param = {
        page: this.currentPage,
        rows: this.pageSize,
        beginTime: this.form.date ? (this.form.date[0] || '') : '',
        endTime: this.form.date ? (this.form.date[1] || '') : ''
      }
      Object.assign(param, this.form)
      getLogs(param).then(res => {
        this.tableData = res.resultData
        this.total = res.total
      })
    },
    onQuery() {
      this.currentPage = 1
      this.getTableData()
    },
    onReset() {
      this.form = {
        title: '',
        operName: '',
        date: []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}
</style>

